<template>
	<div class="home-page">
		<div class="home-header">
			<div class="con">
				<h1>优医</h1>
				<div class="search">
					<svg-icon class="icon" icon-class="search"></svg-icon>
					<span>搜一搜：疾病/症状/医生/健康知识</span>
				</div>
			</div>
		</div>
		<div class="home-navs">
			<van-row class="firstNav">
				<van-col v-for="(item, index) in firstNav" :key="index" span="8">
					<svg-icon class="firstNavIcon" :icon-class="item.icon"></svg-icon>
					<b>{{ item.name }}</b>
					<span>{{ item.descript }}</span>
				</van-col>
			</van-row>
			<van-row class="secondNav">
				<van-col v-for="(item, index) in secondNav" :key="index" span="6">
					<svg-icon class="secondNavIcon" :icon-class="item.icon"></svg-icon>
					<b>{{ item.name }}</b>
				</van-col>
			</van-row>
		</div>
		<div class="home-banner">
			<van-swipe :autoplay="3000" lazy-render>
				<van-swipe-item><img src="@/assets/images/home/banner.png" /></van-swipe-item>
				<van-swipe-item><img src="@/assets/images/home/banner.png" /></van-swipe-item>
				<van-swipe-item><img src="@/assets/images/home/banner.png" /></van-swipe-item>
			</van-swipe>
		</div>
		<van-tabs shrink v-model:active="active">
			<van-tab title="关注">
				<Follow />
			</van-tab>
			<van-tab title="推荐">
				<Recommended />
			</van-tab>
			<van-tab title="减脂">
				<LoseFat />
			</van-tab>
			<van-tab title="饮食">
				<Diet />
			</van-tab>
		</van-tabs>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Follow from './components/follow.vue'
import Recommended from './components/recommended.vue'
import LoseFat from './components/loseFat.vue'
import Diet from './components/diet.vue'

// nav 导航
const firstNav = [
	{
		name: '问医生',
		icon: 'doctor',
		descript: '按科室查问医生'
	},
	{
		name: '极速问诊',
		icon: 'graphic',
		descript: '20s医生极速回复'
	},
	{
		name: '开药门诊',
		icon: 'prescribe',
		descript: '线上买药更方便'
	}
]
const secondNav = [
	{
		name: '药品订单',
		icon: 'medicine'
	},
	{
		name: '健康档案',
		icon: 'archives'
	},
	{
		name: '我的处方',
		icon: 'Prescription'
	},
	{
		name: '疾病查询',
		icon: 'inquire'
	}
]

const active = ref<number>(0)
</script>

<style lang="scss" scoped>
.home-header {
	height: 26.66667vw;
	position: relative;
	box-sizing: border-box;

	&:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 24vw;
		background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
		border-bottom-left-radius: 40vw 5.33333vw;
		border-bottom-right-radius: 40vw 5.33333vw;
	}

	.con {
		position: relative;
		padding: 0 4vw;

		h1 {
			font-size: 4.8vw;
			color: #fff;
			font-weight: 400;
			line-height: 1;
			padding: 5.33333vw 0 5.33333vw 1.33333vw;
			margin: 0;
		}

		.search {
			height: 10.66667vw;
			border-radius: 5.33333vw;
			box-shadow: 0 4vw 5.86667vw -1.86667vw #e0ecfa;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 5.33333vw;
			color: var(--cp-dark);
			font-size: 3.46667vw;

			.icon {
				font-size: 4.26667vw;
				margin-right: 1.33333vw;
			}
		}
	}
}

.home-navs {
	padding: 2.66667vw 4vw 0;

	:deep(.van-row > .van-col) {
		padding: 10px 0;
		text-align: center;

		span,
		b {
			display: block;
			width: 100%;
			text-align: center;
		}

		b {
			font-weight: 500;
			margin-top: 1.33333vw;
			color: var(--cp-text1);
		}

		span {
			font-size: 2.93333vw;
			color: var(--cp-tag);
			margin-top: 0.53333vw;
		}

		.firstNavIcon {
			display: inline-block;
			width: 50px;
			height: 50px;
		}

		.secondNavIcon {
			display: inline-block;
			width: 40px;
			height: 40px;
		}
	}
}

.home-banner {
	padding: 2.66667vw 4vw;
	height: 26.66667vw;

	img {
		height: 100%;
		width: 100%;
	}
}

:deep(.van-search__content) {
	background-color: #fff !important;
	box-shadow: 0 4vw 5.86667vw -1.86667vw #e0ecfa;
}

:deep(.van-tabs__content) {
	padding: 20px 15px;
}
</style>
